@import './icon.scss';

.vxp-tab-nav {
  @include basis;

  $color: $vxp-color-content-normal;
  $open-color: $vxp-color-primary;

  position: relative;
  background-color: transparent;
  border-bottom: $vxp-border-base;

  &__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin-bottom: -1px;
    list-style: none;
  }

  &__item {
    position: relative;
    display: flex;
    padding: 0.6em 1.2em;
    color: $color;
    cursor: pointer;
    user-select: none;
    transition: $vxp-transition-color-base;

    &--active {
      color: $open-color;
    }

    &--disabled {
      color: $vxp-color-content-disabled;
      cursor: not-allowed;
    }
  }

  &--card &__item {
    margin-right: 4px;
    background-color: $vxp-color-fill-background;
    border: $vxp-border-base;
    border-radius: $vxp-border-radius-base $vxp-border-radius-base 0 0;
    transition:
      $vxp-transition-color-base,
      $vxp-transition-background-base,
      $vxp-transition-border-base;

    &--active {
      background-color: $vxp-color-fill;
      border-color: $open-color;
      border-bottom-color: transparent;
    }
  }

  &__track {
    position: absolute;
    bottom: -1px;
    width: 70px;
    pointer-events: none;
    transition: left $vxp-transition-base, width $vxp-transition-base;
  }

  &__marker {
    width: 100%;
    height: 2px;
    background-color: $open-color;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.3em;
  }

  &__item--active &__icon .vxp-icon {
    color: $open-color;
  }

  &__item--disabled &__icon .vxp-icon {
    color: $vxp-color-fill-disabled;
  }
}
